

demoConfig={
  title:"医院名称",
  field:"hospital",
  content:'自定义列中html内容 例如<input v-model="rowData[ck]"></input>'
}

function getSubTableComponent(colConfigArr,pageMode) {
  if(colConfigArr==undefined){
    alert('配置错误,请传递每列属性对应的配置数组,例如: [{title:"医院名称",field:"hospital",tdContent:自定义列中html内容 例如<input v-model="rowData[ck]"></input>}]')
    return
  }
  var headerDomStr=''
  var headerTitles=[]
  var colFieldKeys=[]
  for(k in colConfigArr){
    headerTitles.push(colConfigArr[k].title)
    colFieldKeys.push(colConfigArr[k].field)
  }

  
    if(pageMode=='edit'){
      headerTitles.push("操作")
    }
    headerDomStr='<tr ref="headerRow" > <th v-for="item in headerTitles" >{{item}}</th> </tr>'
   
  var contentDomStr=' <slot></slot>'
  if(colConfigArr!=undefined && colConfigArr.length>0){
    console.log(colFieldKeys)
    var controlCol=''
    var editflag='disabled'
    var inputClass='class="readonlyInput"'
    if(pageMode=='edit'){
      inputClass='class="editInput"'
      editflag=''
      controlCol="<td><button class='rowDeleteButton' @click='deleteRow(rowIndex)' >删除</button></td>"
    }

   // contentDomStr='<template v-for="rowData in tabledata"> <tr> <td v-for="ck in colFieldKeys" :ref="ck" ><input '+inputClass+' '+editflag+' v-model="rowData[ck]" ></input>  </td> '+controlCol+'</tr></template>'
    contentDomStr+="<template v-for='(rowData,rowIndex) in tabledata'> <tr  v-if='rowData.operType!=1'>"
    for(var ck in colConfigArr){
      contentDomStr+="<td>"
      if(colConfigArr[ck].content!=undefined && colConfigArr[ck].content!="" ){
        //有自定义内容 使用自定义内容
        var tmpContent=colConfigArr[ck].content
        contentDomStr+=tmpContent.replace(">"," "+inputClass+' '+editflag+' @focus="readyChange(rowIndex)" v-model=rowData.'+colConfigArr[ck].field+">")
      }else{
        //没有使用通用input
        contentDomStr+='<input @focus="readyChange(rowIndex)" '+inputClass+' '+editflag+' v-model=rowData.'+colConfigArr[ck].field+' ></input>'
      }
      contentDomStr+="</td>"
    }
    contentDomStr+=controlCol+"</tr></template>"
  
  }

   //Vue.component('xcolumns', getXcolumnsComponent());
  // var xcolumnsComponent=getXcolumnsComponent();
  // console.log("xc:",xcolumnsComponent)

  var vc= Vue.extend({
    name: 'sub-table',
    template: ' <div><table class="subtable"><slot name="header"></slot>'+headerDomStr+contentDomStr+' </table>     <slot></slot>   </div> ',
    props:['tabledata'],
    data: function () {
      return {
        title: 'Sub Table',
        headerTitles:headerTitles,
        colFieldKeys:colFieldKeys,
        initoperType:false
      }
    },
    updated:function(){
      if(this.initoperType) return
      console.log("初始化数据状态",this.$props.tabledata.length)
      //初始化数据状态为未修改
      for(var k in this.$props.tabledata){
        var tmpRData=this.$props.tabledata[k]
        if(tmpRData.operType==undefined){
          tmpRData.operType=0
        }
      }
      this.initoperType=true
    },
    methods:{
      deleteRow:function(index){
          console.log("x内部响应点击:"+index)
        // this.$emit('deleteData', index)
        var reacord=this.$props.tabledata[index]
        if(reacord.operType==2){
          //是临时新增的 直接删
          this.$props.tabledata.splice(index, 1)
        }else{
          //标记为删除
          this.$props.tabledata[index].operType=1
        }
        this.$forceUpdate(); // 强制当前组件重新渲染
        console.log(this.$props.tabledata)
      },
      readyChange:function(index){
        //准备修改数据 不管最后改没改  去掉比对逻辑判断状态为已修改
        if(this.$props.tabledata[index].operType==0){
           this.$props.tabledata[index].operType=3
        }
      }
    },
    mounted:function(){
      //定义了标题行插槽内容  将自动生成的标题行隐藏
      if(this.$slots!=undefined && this.$slots.header!=undefined){
        this.$refs['headerRow'].style.display= 'none';
      }
    }
    // watch:{
    //   tabledata: {
    //     handler(newRecords, oldRecords) {
    //       console.log("监听改变")
    //       for(var i in newRecords){
    //         if(newRecords[i].operType==undefined){
    //           newRecords[i].operType="0"
    //         }
    //       }
    //     },
    //     deep: true // 开启深度监听
    //   }
    // }
    
    
  });   



  return vc

}